<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git 全功能解析 - 现代开发协作平台</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Hiragino Sans GB", Simsun, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f9fafb;
        }
        .hero {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            color: white;
        }
        .feature-card {
            transition: all 0.3s ease;
            border-radius: 12px;
            overflow: hidden;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight-item {
            position: relative;
            padding-left: 1.5rem;
        }
        .highlight-item:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.6em;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #2563eb;
        }
        .section-title {
            position: relative;
            display: inline-block;
        }
        .section-title:after {
            content: "";
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #2563eb, transparent);
            border-radius: 3px;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 0.65;
            margin: 0.1em 0.1em 0.1em 0;
            color: #2563eb;
            font-weight: 700;
        }
        .footer-link {
            transition: all 0.3s ease;
        }
        .footer-link:hover {
            color: #93c5fd;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="flex flex-col items-center text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-6 tracking-tight">Git 全功能解析</h1>
                <h2 class="text-xl md:text-2xl font-medium mb-8 opacity-90">现代开发协作的强大平台</h2>
                <div class="max-w-3xl">
                    <p class="text-lg md:text-xl leading-relaxed mb-8 drop-cap">
                        Git仓库通过这些功能提供了全面的代码管理、协作支持和项目跟踪能力。它不仅仅是一个版本控制系统，而是一个支持现代开发实践和团队协作的强大平台。无论是在个人项目还是在大型团队协作中，Git的这些托管功能都发挥了重要作用，帮助开发者提高效率、保障代码质量，并确保项目的顺利推进。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl px-4 py-12">
        <!-- Feature Overview -->
        <section class="mb-20">
            <h2 class="text-3xl font-bold mb-12 text-center section-title">Git 核心功能概览</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="feature-card bg-white p-6 shadow-md">
                    <div class="text-blue-600 text-3xl mb-4"><i class="fas fa-code-branch"></i></div>
                    <h3 class="text-xl font-bold mb-3">版本控制</h3>
                    <p class="text-gray-600 mb-4">跟踪代码变化，记录每次修改的详细信息，支持回滚和比较版本差异。</p>
                    <a href="#version-control" class="text-blue-600 font-medium inline-flex items-center">
                        了解更多 <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                <div class="feature-card bg-white p-6 shadow-md">
                    <div class="text-blue-600 text-3xl mb-4"><i class="fas fa-sitemap"></i></div>
                    <h3 class="text-xl font-bold mb-3">分支管理</h3>
                    <p class="text-gray-600 mb-4">支持多分支并行开发，灵活创建、删除和合并分支。</p>
                    <a href="#branch-management" class="text-blue-600 font-medium inline-flex items-center">
                        了解更多 <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                <div class="feature-card bg-white p-6 shadow-md">
                    <div class="text-blue-600 text-3xl mb-4"><i class="fas fa-cloud"></i></div>
                    <h3 class="text-xl font-bold mb-3">远程仓库</h3>
                    <p class="text-gray-600 mb-4">支持团队协作开发，方便代码共享和同步。</p>
                    <a href="#remote-repository" class="text-blue-600 font-medium inline-flex items-center">
                        了解更多 <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                <div class="feature-card bg-white p-6 shadow-md">
                    <div class="text-blue-600 text-3xl mb-4"><i class="fas fa-shield-alt"></i></div>
                    <h3 class="text-xl font-bold mb-3">权限管理</h3>
                    <p class="text-gray-600 mb-4">细粒度控制访问权限，保障代码安全。</p>
                    <a href="#permission-management" class="text-blue-600 font-medium inline-flex items-center">
                        了解更多 <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                <div class="feature-card bg-white p-6 shadow-md">
                    <div class="text-blue-600 text-3xl mb-4"><i class="fas fa-search"></i></div>
                    <h3 class="text-xl font-bold mb-3">代码审查</h3>
                    <p class="text-gray-600 mb-4">通过PR机制进行代码审查，提高代码质量。</p>
                    <a href="#code-review" class="text-blue-600 font-medium inline-flex items-center">
                        了解更多 <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                <div class="feature-card bg-white p-6 shadow-md">
                    <div class="text-blue-600 text-3xl mb-4"><i class="fas fa-robot"></i></div>
                    <h3 class="text-xl font-bold mb-3">CI/CD</h3>
                    <p class="text-gray-600 mb-4">自动化构建、测试和部署流程。</p>
                    <a href="#ci-cd" class="text-blue-600 font-medium inline-flex items-center">
                        了解更多 <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- Feature Details -->
        <section class="space-y-20">
            <!-- Version Control -->
            <div id="version-control" class="bg-white p-8 rounded-xl shadow-sm">
                <div class="flex items-center mb-6">
                    <div class="bg-blue-100 p-3 rounded-lg mr-4">
                        <i class="fas fa-code-branch text-blue-600 text-2xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold">1. 版本控制</h2>
                </div>
                <p class="text-gray-700 mb-6">
                    Git最核心的功能是版本控制。它允许开发者跟踪代码的变化，记录每次修改的详细信息。每次提交（commit）都会保存代码的快照和相关的元数据，包括作者、日期、提交信息等。版本控制使得可以随时回滚到先前的版本，比较不同版本的代码差异，以及在需要时恢复丢失的代码。
                </p>
                <div class="bg-blue-50 p-6 rounded-lg">
                    <h3 class="text-lg font-semibold mb-4 text-blue-800">功能亮点:</h3>
                    <ul class="space-y-3">
                        <li class="highlight-item font-medium">提交历史: 记录每次代码修改。</li>
                        <li class="highlight-item font-medium">分支和合并: 支持多条开发线路并将其合并。</li>
                        <li class="highlight-item font-medium">回滚和恢复: 能够恢复到先前的状态。</li>
                    </ul>
                </div>
            </div>

            <!-- Branch Management -->
            <div id="branch-management" class="bg-white p-8 rounded-xl shadow-sm">
                <div class="flex items-center mb-6">
                    <div class="bg-blue-100 p-3 rounded-lg mr-4">
                        <i class="fas fa-sitemap text-blue-600 text-2xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold">2. 分支管理</h2>
                </div>
                <p class="text-gray-700 mb-6">
                    Git的分支管理功能使得开发者可以在不干扰主线代码的情况下开发新功能或修复问题。每个分支代表了一个独立的开发环境，允许开发人员并行开发。分支管理还支持创建、删除和合并分支，使得代码的集成和发布变得灵活而高效。
                </p>
                <div class="bg-blue-50 p-6 rounded-lg">
                    <h3 class="text-lg font-semibold mb-4 text-blue-800">功能亮点:</h3>
                    <ul class="space-y-3">
                        <li class="highlight-item font-medium">创建和删除分支: 轻松创建和删除开发分支。</li>
                        <li class="highlight-item font-medium">合并分支: 将不同分支的更改合并到主分支中。</li>
                        <li class="highlight-item font-medium">分支策略: 支持不同的分支策略，如Git Flow和GitHub Flow。</li>
                    </ul>
                </div>
            </div>

            <!-- Remote Repository -->
            <div id="remote-repository" class="bg-white p-8 rounded-xl shadow-sm">
                <div class="flex items-center mb-6">
                    <div class="bg-blue-100 p-3 rounded-lg mr-4">
                        <i class="fas fa-cloud text-blue-600 text-2xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold">3. 远程仓库支持</h2>
                </div>
                <p class="text-gray-700 mb-6">
                    Git支持远程仓库，允许开发团队在不同的地理位置之间共享代码。远程仓库是代码托管服务的核心，通过它可以将本地仓库推送到远程仓库，也可以从远程仓库拉取最新的代码。远程仓库支持协作开发，使得团队成员能够同步工作进度。
                </p>
                <div class="bg-blue-50 p-6 rounded-lg">
                    <h3 class="text-lg font-semibold mb-4 text-blue-800">功能亮点:</h3>
                    <ul class="space-y-3">
                        <li class="highlight-item font-medium">推送和拉取: 从本地仓库推送到远程仓库，或从远程仓库拉取更新。</li>
                        <li class="highlight-item font-medium">远程跟踪: 支持管理多个远程仓库和分支。</li>
                        <li class="highlight-item font-medium">远程协作: 支持多人协作开发，避免代码冲突。</li>
                    </ul>
                </div>
            </div>

            <!-- Permission Management -->
            <div id="permission-management" class="bg-white p-8 rounded-xl shadow-sm">
                <div class="flex items-center mb-6">
                    <div class="bg-blue-100 p-3 rounded-lg mr-4">
                        <i class="fas fa-shield-alt text-blue-600 text-2xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold">4. 权限管理</h2>
                </div>
                <p class="text-gray-700 mb-6">
                    Git托管服务通常提供细粒度的权限管理功能，确保代码安全。通过权限管理，可以控制谁可以访问、修改或提交到特定的仓库或分支。权限管理对于大型团队和开源项目尤其重要，可以防止未经授权的访问或修改。
                </p>
                <div class="bg-blue-50 p-6 rounded-lg">
                    <h3 class="text-lg font-semibold mb-4 text-blue-800">功能亮点:</h3>
                    <ul class="space-y-3">
                        <li class="highlight-item font-medium">访问控制: 管理对仓库的读写权限。</li>
                        <li class="highlight-item font-medium">分支权限: 设定分支的访问权限，控制谁可以合并代码。</li>
                        <li class="highlight-item font-medium">审计日志: 记录和监控代码访问和修改情况。</li>
                    </ul>
                </div>
            </div>

            <!-- Code Review -->
            <div id="code-review" class="bg-white p-8 rounded-xl shadow-sm">
                <div class="flex items-center mb-6">
                    <div class="bg-blue-100 p-3 rounded-lg mr-4">
                        <i class="fas fa-search text-blue-600 text-2xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold">5. 代码审查</h2>
                </div>
                <p class="text-gray-700 mb-6">
                    代码审查是提高代码质量的重要过程。Git托管服务通常集成代码审查工具，支持开发者对提交的代码进行审查、讨论和反馈。代码审查有助于发现和修复代码中的缺陷，确保代码符合团队的质量标准。
                </p>
                <div class="bg-blue-50 p-6 rounded-lg">
                    <h3 class="text-lg font-semibold mb-4 text-blue-800">功能亮点:</h3>
                    <ul class="space-y-3">
                        <li class="highlight-item font-medium">拉取请求（Pull Request）: 提交代码更改的请求，并进行审查和讨论。</li>
                        <li class="highlight-item font-medium">评论和讨论: 对代码提交进行评论，进行团队讨论。</li>
                        <li class="highlight-item font-medium">合并控制: 在代码审查通过后，控制代码的合并过程。</li>
                    </ul>
                </div>
            </div>

            <!-- CI/CD -->
            <div id="ci-cd" class="bg-white p-8 rounded-xl shadow-sm">
                <div class="flex items-center mb-6">
                    <div class="bg-blue-100 p-3 rounded-lg mr-4">
                        <i class="fas fa-robot text-blue-600 text-2xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold">6. 持续集成和持续部署（CI/CD）</h2>
                </div>
                <p class="text-gray-700 mb-6">
                    Git托管服务常常与持续集成和持续部署工具集成，自动化构建、测试和部署流程。CI/CD使得开发团队能够在代码提交后自动执行测试和构建，确保每次提交都不会引入新的问题，同时简化部署过程。
                </p>
                <div class="bg-blue-50 p-6 rounded-lg">
                    <h3 class="text-lg font-semibold mb-4 text-blue-800">功能亮点:</h3>
                    <ul class="space-y-3">
                        <li class="highlight-item font-medium">自动构建: 在代码提交后自动触发构建。</li>
                        <li class="highlight-item font-medium">自动测试: 自动执行单元测试和集成测试。</li>
                        <li class="highlight-item font-medium">自动部署: 将通过测试的代码自动部署到生产环境。</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Git Workflow Visualization -->
        <section class="mt-20 bg-white p-8 rounded-xl shadow-sm">
            <h2 class="text-2xl font-bold mb-8 text-center section-title">Git 工作流程可视化</h2>
            <div class="mermaid">
                gitGraph
                    commit
                    commit
                    branch feature
                    checkout feature
                    commit
                    commit
                    checkout main
                    merge feature
                    commit
                    branch hotfix
                    checkout hotfix
                    commit
                    checkout main
                    merge hotfix
            </div>
            <div class="mt-6 text-center text-gray-600">
                <p>上图展示了Git的基本工作流程，包括创建分支、提交更改和合并分支的过程。</p>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="text-center">
                <h3 class="text-xl font-bold mb-2">技术小馆</h3>
                <p class="text-gray-400">探索技术的无限可能</p>
                <div class="mt-6">
                    <a href="http://www.yuque.com/jtostring" class="footer-link text-blue-400 hover:text-blue-300">访问技术小馆语雀文档 <i class="fas fa-external-link-alt ml-1"></i></a>
                </div>
                <div class="mt-8 pt-6 border-t border-gray-800 text-gray-500 text-sm">
                    <p>© 2023 技术小馆. 保留所有权利.</p>
                </div>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            gitGraph: {
                showBranches: true,
                showCommitLabel: true,
                mainBranchName: 'main'
            }
        });
    </script>
</body>
</html>